<template>
<view class="main flex_c">
  <nav-bar customBack @customBack="customBack" title="我的代表作品" />
   <!-- status 1 审核中  2审核通过 3 已驳回 -->
  <van-tabs :active="query.myShowStatus" title-active-color="#000" title-inactive-color="#666" @change="tabChange">
    <van-tab title="全部" :name="''"></van-tab>
    <van-tab v-for="item in myShowStatusList" :key="item.id" :title="item.text" :name="item.id"></van-tab>
  </van-tabs>
  <view class="flex1" style="overflow: hidden;">
    <scroll-view
      v-if="totalHeight"
      scroll-y
      :style="{ height: `calc(100vh - ${totalHeight}px -  env(safe-area-inset-bottom) - 60rpx) ` }"
      :lower-threshold="130"
      @scrolltolower="onMore"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      >
      <view v-if="total"  class="pl-20 pr-20 pt-20  content">
        <grid-view type="masonry" cross-axis-count="2" :cross-axis-gap="8" :main-axis-gap="12">
          <view class="cont_item" v-for="item in list" :key="item.id" @click="onLink(item)">
            <repWorkVideo :item="item">
              <template #status>
                <view class="pr-10" :style="{color: myShowStatusList.find(({ id }) => id === item.myShowStatus)?.color, fontSize: '20rpx' }">
                  {{ myShowStatusList.find(({ id }) => id === item.myShowStatus)?.text }}
                </view>
              </template>
            </repWorkVideo>
          </view>
        </grid-view>
      </view>
      <van-empty v-if="total === 0" class="pt-60" image="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/empty.png"
        description="暂无代表作品" />
      <view v-if="total && total === list.length" class="all_tip">到底了</view>
    </scroll-view>
  </view>
</view>
</template>
<script setup>
import { getmyReprWorksList } from "@/api/center"
import { ref, onBeforeMount, reactive, nextTick, watch, toRefs, getCurrentInstance } from 'vue'
// @dcloudio/uni-app
import repWorkVideo from "@/components/ipElite/rep-work-video"
// 下拉到底事件
let onMore = () => {
	if (info.total > info.list.length) {
		++info.query.pageCode
		fnGet()
	}
}
let myShowStatusList = [
  {
    id: 1,
    text: '展示中',
    color: '#00B277'
  },
  {
    id: 2,
    text: '已下架',
    color: '#939798'
  },
  {
    id: 3,
    text: '已驳回',
    color: '#CC0000'
  }
]
let onLink = item => {
  // if (item.myShowStatus === 1) {
    uni.navigateTo({
      url: `/pages/center/ipElite/repworksManageDetail?id=${item.id}`
    })
  // }
}
onBeforeMount(() => {
  fnGet()
})
let info = reactive({
	query: {
    myShowStatus: '',
		pageSize: 40,
		pageCode: 1,
	},
	list: [],
	total: '',
  triggered: false
})


let fnGet = async () => {
	const { code, data } = await getmyReprWorksList(info.query)
	if (code === 200) {
		info.list = info.list.concat(data.rows)
		info.total = data.total
    info.triggered = false
	}
}
let tabChange = e => {
  info.query.myShowStatus = e.target.name || ''
  info.query.pageCode = 1
  info.list = []
  fnGet()
}
let onRefresh = () => {
  info.list = []
	info.total = ''
  info.triggered = true
	info.query.pageCode = 1
	fnGet()
}
let customBack = () => {
  uni.switchTab({
    url: '/pages/center/index'
  })
}


let { query, list, total, triggered } = toRefs(info)

</script>
<style lang="scss" scoped>
.main {
  --tabs-line-height: 88rpx;
  --tab-font-size: 28rpx;
  --tabs-bottom-bar-height: 4rpx;
}
.content {
  // column-count: 2; // 规定元素应该被划分的列数
  // column-gap: 16rpx; // 列之间的间隔
  font-size: 0rpx;
  .cont_item {
  //  break-inside: avoid;
    margin-bottom: 20rpx;
  }
}
</style>